﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="build/reset-fonts-grids/reset-fonts-grids.css" />
    <link rel="stylesheet" type="text/css" href="build/container/assets/skins/sam/container.css" />
    <link rel="stylesheet" type="text/css" href="build/menu/assets/skins/sam/menu.css" />
    <link rel="stylesheet" type="text/css" href="build/button/assets/skins/sam/button.css" />
    <link rel="stylesheet" type="text/css" href="build/calendar/assets/skins/sam/calendar.css" />
    <link rel="stylesheet" type="text/css" href="build/editor/assets/skins/sam/editor.css" />
    <link rel="stylesheet" type="text/css" href="build/resize/assets/skins/sam/resize.css" />
    <link rel="stylesheet" type="text/css" href="build/layout/assets/skins/sam/layout.css" />
    
    <script type="text/javascript" src="build/utilities/utilities.js"></script>
    <script type="text/javascript" src="build/container/container-min.js"></script>
    <script type="text/javascript" src="build/calendar/calendar-min.js"></script>
    <script type="text/javascript" src="build/resize/resize-min.js"></script>
    <script type="text/javascript" src="build/editor/simpleeditor-min.js"></script>
    <script type="text/javascript" src="build/layout/layout-min.js"></script>

</head>
<body class="yui-skin-sam">

<input type="button" id="addRow" value="ShowPanel">


<div id="demo"></div>


<script>
    (function () {
        var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event,
        layout = null,
        resize = null;

        Event.onDOMReady(function () {
            var panel = new YAHOO.widget.Panel('demo', {
                draggable: true,
                close: true,
                autofillheight: "body",         
                underlay: 'none',
                width: '500px',
                height: '300px',
                xy: [100, 100]
            });
            panel.setHeader('Test Panel');
            panel.setBody('<div id="layout"></div>');
            panel.renderEvent.subscribe(function () {
                Event.onAvailable('layout', function () {
                    
                });
            });
            panel.render();
            resize = new YAHOO.util.Resize('demo', {
                handles: ['br'],
                autoRatio: true,
                status: false,
                minWidth: 380,
                minHeight: 300
            });
            resize.on('resize', function (args) {
                var panelHeight = args.height,
                padding = 20;
                Dom.setStyle('layout', 'display', 'none');
                this.cfg.setProperty("height", panelHeight + 'px');
                layout.set('height', this.body.offsetHeight - padding);
                layout.set('width', this.body.offsetWidth - padding);
                Dom.setStyle('layout', 'display', 'block');
                layout.resize();
            }, panel, true);
        });
    })();

</script>


</body>
</html>
